.modalwrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    backdrop-filter: blur(5px);

    .modalbody {
        position: relative;
        width: clamp(300px, 60%, 500px);
        background-color: var(--sec-bg);
        border-radius: clamp(10px, 1vw, 20px);
        box-shadow: 0 0 5px 1px var(--shadow);
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid var(--pale-txt);

        .modalcontent {
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;
            width: 100%;
            min-height: clamp(150px, 20vw, 200px);
            padding: clamp(10px, 2vw, 20px);
            gap: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 0;
    
            > button {
                width: 100%;
            }

            > hr {
                height: 0;
                width: clamp(200px, 100%, 400px);
                border: 1px solid var(--pale-txt);
                margin-bottom: 10px;
            }
    
            > div {
                width: clamp(200px, 100%, 420px);
                display: block;
            }
        }
        .cap {
            position: sticky;
            top: 0;
            padding: 10px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--main-bg);
            border-bottom: 1px solid var(--pale-txt);
            z-index: 1;

        }
    }
}